<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <script>
        var ua = navigator.userAgent,
            isAndroid = /android/ig.test(ua),
            isIos = /iphone|ipod|ipad/ig.test(ua),
            isMicroMessenger = /MicroMessenger/ig.test(ua);//判别是否为微信
        if(isAndroid || isIos || isMicroMessenger){
            window.location.href = 'mobile.html';
        }
    </script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <script src="lib/jquery.js"></script>
    <script src="lib/underscore.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <title>幼儿数学题库</title>
    <STYLE type="text/css">
        .form-inline .form-control{
            width: 50%;
            border: none;
            box-shadow: none;
            border-bottom: 1px dotted #ccc;
        }
        label.ti{
            width: 100px;
            text-align: right;
            padding-right: 10px;
            font-size: 18px;
        }
        #tiku{
        }
        #tiku table tr td{
            width: 180px;
        }
        #tiku table tr td input{
            width: 60px;
            display: inline;
        }
        table.table-no-border tr td{
            border: none;
        }
        .controll-span{
            display: inline-block;
        }
        .controll-span .input{
            width: 60px;
        }
    </STYLE>
    <style media="print">
        #tiku table tr td input{
            width: 10px;
            display: inline;
        }
        .control-btns,.timer{
            display: none;
        }
        .form-inline .form-control{
            border: none;
        }
        #tiku{
            font-size: 16px;
        }
        .one-ti{
            line-height: 1em;
        }
    </style>
</head>
<body>
<div>
    <div class="control-btns">
        <div class='controll-span'><label>数量: <input type="text" class="input" name="count" id="count" value="40"></label></div>
        <div class='controll-span'><label>几以内: <input type="text" class="input" name="max" id="max" value="10"></label></div>
        <div class='controll-span'>
            <label><input type="checkbox" name="type" value="1" checked>加法</label>
            <label><input type="checkbox" name="type" value="2">减法</label>
            <label><input type="checkbox" name="type" value="3">乘法</label>
            <label><input type="checkbox" name="type" value="4">除法</label>
        </div>
        <div class='controll-span'>
            <button class="btn btn-primary" onclick="generate()">生成</button>
            <button class="btn btn-danger" onclick="testResult()">打分</button>
            <button class="btn btn-warning" onclick="printWindow()">打印</button>
            <span id="score"></span>
        </div>
    </div>
    <div id="tiku" class="form-inline">

    </div>
    <div class="text-center timer"><h1></h1>

        <button style="width: 50%;" class="btn btn-danger" onclick="testResult()">打分</button>
    </div>
</div>
<script type="text/javascript">
    function getPlusRandom() {
        var max = $("#max").val();
        var v1 = _.random(1, max);
        var v2 = _.random(1, max - v1);
        if(v2 === 0){
            v2 = _.random(max - v1);
        }
        return v1 + " + " + v2 + " = ";
    }
    function getMinusRandom() {
        var max = $("#max").val();
        var v1 = _.random(1, max);
        var v2 = _.random(1, max);
        if(v2 > v1){
            return v2 + " - " + v1 + " = ";
        }
        return v1 + " - " + v2 + " = ";
    }
    function getMulRandom() {
        var max = $("#max").val();
        var v1 = _.random(1, max);
        var v2 = _.random(1, max - v1);
        return v1 + " * " + v2 + " = ";
    }
    function getDivRandom() {
        var max = $("#max").val();
        var v1 = _.random(1, max);
        var v2 = _.random(1, max);
        return (v1 * v2) + " / " + v2 + " = ";
    }
    function getTi() {
        var methods = {
            1:getPlusRandom,
            2:getMinusRandom,
            3:getMulRandom,
            4:getDivRandom
        };
        var types = [];
        $("[name=type]:checked").each(function (i,n) {
            types.push(n.value);
        });
        var ti = methods[types[_.random(types.length -1)]].call();
        return ti;
    }
    var timer = 0;
    var theTime = 0;
    var stopMask = false;
    var columns = 5;
    function setColumns() {
        var cols = window.outerWidth / 200;
        if(cols > 5){
            columns = 5;
        } else {
            columns = 2;
        }
    }
    setColumns();

    function generate() {
        stopMask = false;
        var html = '<table class="table table-no-border"><tr class="row1">';
        for(var i = 0; i < $("#count").val(); i++){
            if(i!==0 && i%columns === 0){
                html += '</tr><tr class="row1">';
            }
           /* html += '<div class="col-md-3 form-group one-ti">' +
                '<label class="ti" for="result-'+i+'">' + getTi() + '</label>' +
                '<input type="text" id="result-'+i+'" class="result form-control" value="">' +
                '<span class="ti-result glyphicon"></span>' +
                '</div>';*/
            html += '<td class="one-ti">' +
                '<label class="ti" for="result-'+i+'">' + getTi() + '</label>' +
                '<input type="text" id="result-'+i+'" class="result form-control" value="">' +
                '<span class="ti-result glyphicon"></span>' +
                '</td>';
        }
        html += '</tr></table>';

        $("#tiku").html(html);
        clearInterval(timer);
        theTime = 0;
        timer = setInterval(function () {
            if(stopMask){
                return;
            }
            theTime ++;
            var t = theTime;
            var m = parseInt(t/60, 10);
            var s = t%60;
            $(".timer h1").text(m + '分' + s + "秒， 共" + t + '秒');
        }, 1000);
    }
    function testResult() {
        stopMask = true;
        $(".ti-result").removeClass('glyphicon-ok glyphicon-remove text-danger');
        $(".ti").each(function (i,n) {
            var ctt = $(n).closest('.one-ti');
            var t = $(n).text();
            var r1 = eval(t.substr(0, t.length - 3));
            var r2 = $('.result', ctt).val().trim();
            if(r2 != '' && r1 == r2){
                $('.ti-result', ctt).addClass('glyphicon-ok')
            } else {
                $('.ti-result', ctt).addClass('glyphicon-remove text-danger');
            }
            var score = $(".glyphicon-ok").length / $("#count").val() * 100;
            $("#score").text(score + '分')
        })
//        eval($(".ti:first").text().substr(0, $(".ti:first").text().length - 3))
    }

    function printWindow() {
        columns = 5;
        generate();
        window.print();
    }

    $("#container").on('focus', '.result', function () {
        $('.one-ti').removeClass('bg-danger');
        $(this).closest('.one-ti').addClass('bg-danger');
    })
</script>
</body>
</html>